<template>
  <div class="org-audit">
    <div class="flex items-center justify-between mb-3">
      <span class="text-sm text-gray-500">当前状态：{{ organization?.audit_status_label || "-" }}</span>
      <el-space>
        <el-button type="primary" :icon="useRenderIcon('ep:circle-check')" :loading="loading" @click="emitApprove" :disabled="!canApprove">
          通过
        </el-button>
        <el-button type="danger" :icon="useRenderIcon('ep:circle-close')" :loading="loading" @click="emitReject" :disabled="!canApprove">
          驳回
        </el-button>
        <el-button type="primary" text :icon="useRenderIcon('ep:plus')" @click="$emit('fast-create')">
          快速建档
        </el-button>
      </el-space>
    </div>

    <el-timeline>
      <el-timeline-item
        v-for="record in records"
        :key="record.id"
        :timestamp="record.handle_time"
        :type="statusTagType(record.status)"
      >
        <div class="flex items-center justify-between">
          <div>
            <span class="font-medium">{{ record.status_label }}</span>
            <span class="ml-2 text-xs text-gray-500">{{ record.handler_name || "系统" }}</span>
          </div>
          <span class="text-xs text-gray-400">{{ record.handle_time }}</span>
        </div>
        <p class="mt-1 text-sm text-gray-600">
          {{ record.remark || "无备注" }}
        </p>
      </el-timeline-item>
    </el-timeline>

    <el-empty v-if="!records.length && !loading" description="暂无审核记录" />
    <el-skeleton v-if="loading" :rows="6" animated />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

interface AuditRecord {
  id: number;
  status: number;
  status_label: string;
  handle_time: string;
  handler_name: string;
  remark?: string;
}

const props = defineProps<{
  organization: Record<string, any> | null;
  records: AuditRecord[];
  loading: boolean;
}>();

const emit = defineEmits<{
  (e: "refresh"): void;
  (e: "approve"): void;
  (e: "reject"): void;
  (e: "fast-create"): void;
}>();

const canApprove = computed(() => props.organization?.audit_status === "pending");

const statusTagType = (status?: number) => {
  switch (status) {
    case 1:
      return "success";
    case 2:
      return "danger";
    default:
      return "info";
  }
};

const emitApprove = () => emit("approve");
const emitReject = () => emit("reject");
</script>

<style scoped>
.org-audit {
  min-height: 200px;
}
</style>
